<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 头组件 -->
        <pageTools>
          <template #after>
            <el-button type="primary" @click="addFn">添加员工</el-button>
          </template>
        </pageTools>
        <!-- 表格 -->
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          height="calc(100vh - 247px)"
        >
          <el-table-column
            prop="username"
            label="用户名"
          />
          <el-table-column
            prop="email"
            label="邮箱"
          />
          <el-table-column
            label="操作"
          >
            <template v-slot="{row}">
              <el-button type="primary" size="small" @click="assignFn(row.id)">设置角色</el-button>
              <el-button size="small" @click="editFn(row.id)">编辑</el-button>
              <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
        <!-- <el-pagination
          :page-size="limit"
          layout="prev, pager, next"
          :total="total"
          @current-change="changePage"
        /> -->
      </el-card>
      <!-- 添加员工 -->
      <el-dialog title="添加员工" :visible="showDialog" @close="closeFn">
        <el-form
          ref="form"
          :model="formData"
          status-icon
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="formData.username" autocomplete="off" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="formData.email" type="email" autocomplete="off" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="formData.password" type="password" autocomplete="off" />
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="center" style="margin-top: 20px">
          <el-col :span="5" style="margin-left: 15px ">
            <el-button @click="closeFn">取消</el-button>
            <el-button type="primary" @click="confirmFn">确定</el-button>
          </el-col>
        </el-row>
      </el-dialog>
      <EditDialog ref="editDialog" :show-edit-dialog.sync="showEditDialog" @updateEmployee="getEmployeesListFn" />
      <!-- 分配角色 -->
      <AssignRoles ref="assignRole" :show-roles-list.sync="showRoleDialog" />
    </div>
  </div>
</template>

<script>
import pageTools from '@/components/pageTools'
// 引入获取员工列表接口
import { getEmployeesList, getUsersCount, addEmployee, delEmployee } from '@/api/employees'
// 引入编辑员工组件
import EditDialog from './components/EditDialog.vue'
// 引入分配角色组件
import AssignRoles from './components/AssignRoles.vue'
export default {
  components: { pageTools, EditDialog, AssignRoles },
  data() {
    return {
      tableData: [],
      currentPage: 1, //  // 当前页码
      pagesize: 5, // 每页的条数
      page: {
        _limit: 5, // 获取最大数据条数
        _start: 0 // 从几条开始获取
      },
      total: 0, // 用户数量
      showDialog: false,
      formData: { // 表单数据
        username: '',
        email: '',
        password: ''
      },
      rules: { // 表单 验证
        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 2, max: 6, message: '长度在2-6个字符长度', trigger: 'blur' }],
        email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' },
          { pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, message: '邮箱格式不正确', trigger: 'blur' }],
        password: [
          { required: 'true', message: '密码不能为空', trigger: 'blur' }
        ]
      },
      showEditDialog: false, // 控制编辑员工显示
      showRoleDialog: false // 控制分配角色显示
    }
  },
  created() {
    this.getEmployeesListFn()
    this.getUsersCountFn()
  },
  methods: {
    // 获取用户总数
    async getUsersCountFn() {
      // 获取用户数量
      this.total = await getUsersCount()
    },
    async getEmployeesListFn() {
      // 获取用户列表
      this.tableData = await getEmployeesList(this.page)
    },
    // 当前显示多少条数据
    handleSizeChange(size) {
      this.pagesize = size
      console.log(144, size)
      this.page._limit = size
      this.getEmployeesListFn()
    },
    // 当前页码发生变化时触发的函数
    handleCurrentChange(page) {
      this.currentPage = page
      this.page._start = (page - 1) * this.page._limit
      this.getEmployeesListFn()
      console.log(148, page)
    },
    addFn() { // 添加员工
      this.showDialog = true
    },
    closeFn() { // 关闭弹窗
      this.showDialog = false
      this.formData = { // 表单数据
        username: '',
        email: '',
        password: ''
      }
      this.$refs.form.resetFields()
    },
    async confirmFn() { // 确认按钮
      await this.$refs.form.validate()
      await addEmployee(this.formData)
      this.$message.success('添加成功')
      this.getEmployeesListFn()
      this.getUsersCountFn()
      this.closeFn()
    },
    async editFn(id) { // 编辑员工
      this.showEditDialog = true
      this.$refs.editDialog.getUserDetailFn(id)
    },
    delFn(id) { // 删除员工
      this.$confirm('是否删除此员工', '删除', {
        cancelButtonText: '取消',
        confirmButtonText: '确认',
        type: 'warning'
      }).then(async() => {
        await delEmployee(id)
        this.$message.success('删除成功')
        if (this.tableData.length === 1 && this.currentPage > 1) {
          this.currentPage = this.currentPage - 1
          this.page._start = (this.currentPage - 1) * this.page._limit
        }
        this.getEmployeesListFn()
        this.getUsersCountFn()
      }).catch(() => {
        this.$message.info('取消删除')
      })
    },
    assignFn(id) { // 分配角色
      this.showRoleDialog = true
      this.$refs.assignRole.getUserDetailFn(id)
    }
  }
}
</script>

<style lang="scss">
.container {
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

</style>
